<template>
  <div class="app-container">
    <div style="background-color: #fff">
      <div class="container-module" style="padding-bottom: 0">
        <el-form
          ref="searchForm"
          :inline="true"
          class="search-form"
          size="small"
        >
          <el-row style="display: flex; flex-wrap: wrap">
            <div style="flex: 1">
              <el-form-item
                class="search-form-item"
                label="供应商"
                style="margin: 5px 0; width: 400px"
              >
                <el-input
                  v-model="input1"
                  placeholder="请输入内容"
                  clearable
                  class="input-with-select"
                  style="width: 100%"
                >
                  <el-select
                    slot="prepend"
                    v-model="value"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in optionsore"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-input>
              </el-form-item>

              <el-form-item
                class="search-form-item"
                label="供应商状态"
                style="margin: 5px 0"
              >
                <el-select v-model="status" placeholder="全部" clearable>
                  <el-option label="正常" value="1" />
                  <el-option label="禁用" value="2" />
                </el-select>
              </el-form-item>
            </div>
            <div style="margin: 5px 0; text-align: right">
              <el-form-item>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-search"
                  @click="search"
                >查询</el-button>
                <el-button
                  size="small"
                  type="primary"
                  icon="el-icon-refresh"
                  @click="resetting"
                >重置</el-button>
                <el-button
                  v-if="!searchDisplay"
                  size="small"
                  icon="el-icon-caret-bottom"
                  @click="searchDisplay = true"
                >展开</el-button>
                <el-button
                  v-else
                  size="small"
                  icon="el-icon-caret-top"
                  @click="searchDisplay = false"
                >收起</el-button>
              </el-form-item>
            </div>
          </el-row>
          <el-row v-if="searchDisplay" style="display: flex">
            <el-form-item
              class="search-form-item"
              label="时间段"
              style="margin: 5px 0"
            >
              <el-date-picker
                v-model="shijianduan"
                clearable
                value-format="yyyy-MM-dd"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              />
            </el-form-item>
            <el-form-item
              class="search-form-item"
              label="区域"
              style="margin: 5px 0"
            >
              <el-cascader
                v-model="quID"
                :options="citys"
                :props="{ checkStrictly: true, value: 'id', label: 'name' }"
                clearable
              />
            </el-form-item>
            <el-form-item
              class="search-form-item"
              label="等级"
              style="margin: 5px 0"
            >
              <el-select v-model="levelId" placeholder="请选择" clearable>
                <el-option
                  v-for="(item, index) in options"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
      <el-divider />
      <div style="padding: 0 20px 20px">
        <div class="marginBottom">
          <el-row :gutter="20">
            <el-col :xs="24" :sm="16">
              <div class="left-panel">
                <el-button
                  v-hasPermi="'supplierlist/add'"
                  icon="el-icon-circle-plus-outline"
                  type="primary"
                  size="small"
                  @click="
                    () => {
                      dialogVisibledrawer = true;
                    }
                  "
                >添加供应商</el-button>
                <el-button
                  v-hasPermi="'supplier/export'"
                  icon="el-icon-download"
                  type="primary"
                  plain
                  size="small"
                  :disabled="exportLoading"
                  :loading="exportLoading"
                  @click="exportSupplierListWay"
                >导出</el-button>
              </div>
            </el-col>
            <el-col :xs="24" :sm="8">
              <div class="right-panel el-button-group">
                <el-button
                  class=""
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetting"
                />
                <el-dropdown trigger="click" :hide-on-click="false">
                  <span class="el-dropdown-link">
                    <el-button
                      class=""
                      icon="el-icon-s-operation"
                      size="mini"
                    />
                  </span>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item
                      v-for="fruit in allTableThead"
                      :key="fruit"
                    >
                      <el-checkbox
                        v-model="checkboxTableThead"
                        :label="fruit"
                      >{{ tableTheadOptions[fruit].label }}</el-checkbox>
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </div>
            </el-col>
          </el-row>
        </div>
        <el-row :gutter="20">
          <el-col class="new_table_card">
            <el-table
              ref="tablerefs"
              v-loading="loading"
              :data="tableData"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
              height="100%"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="55" />
              <el-table-column
                prop="id"
                label="ID"
                align="center"
                width="70"
              />
              <el-table-column
                v-for="fruit in tableThead"
                :key="fruit"
                :label="tableTheadOptions[fruit].label"
                align="center"
              >
                <template slot-scope="scope">
                  <div v-if="fruit == 'adminName'">
                    <el-button
                      v-if="scope.row.admin_id == 0"
                      v-hasPermi="'supplier/binding'"
                      type="text"
                      size="mini"
                      @click="bindingStatusWay(scope.row)"
                    >
                      绑定管理员
                    </el-button>
                    <span v-else>
                      <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                        <div class="one_line_hidden" style="color: #13ce66;">
                          {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                        </div>
                      </el-tooltip>
                      <!-- {{ scope.row[fruit] }} -->
                    </span>
                  </div>
                  <div v-else-if="fruit == 'status'">
                    <el-switch
                      v-model="scope.row.status"
                      :active-value="1"
                      :inactive-value="2"
                      @change="editStatusWay(scope.row)"
                    />
                  </div>
                  <div v-else-if="fruit == 'LevelName'">
                    <el-tooltip placement="top-start" :content="scope.row.SupplierInfo.LevelName + ''">
                      <div class="one_line_hidden">
                        {{ scope.row.SupplierInfo ? scope.row.SupplierInfo.LevelName: "-" }}
                      </div>
                    </el-tooltip>
                    <!-- {{ scope.row.SupplierInfo.LevelName }} -->
                  </div>
                  <div v-else-if="fruit == 'goodsCount'">
                    {{ scope.row.SupplierInfo.goodsCount }}
                  </div>
                  <div v-else-if="fruit == 'saleroom'">
                    {{ scope.row.SupplierInfo.Saleroom }}
                  </div>
                  <div v-else>
                    <el-tooltip placement="top-start" :content="scope.row[fruit] + ''">
                      <div class="one_line_hidden">
                        {{ scope.row[fruit] ? scope.row[fruit] : "-" }}
                      </div>
                    </el-tooltip>
                    <!-- {{ scope.row[fruit] ? scope.row[fruit] : "-" }} -->
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                fixed="right"
                width="180"
                prop="address"
                label="操作"
                align="center"
              >
                <template slot-scope="scope">
                  <!-- <el-button
                    v-hasPermi="'supplier/freeze'"
                    v-if="scope.row.status == 1"
                    type="text"
                    @click="editStatusWay(scope.row)"
                  >
                    禁用
                  </el-button>

                  <el-button
                    v-if="scope.row.status !== 1"
                    v-hasPermi="'supplier/freeze'"
                    style="magrin: 5px"
                    type="text"
                    size="mini"
                    @click="editStatusWay(scope.row)"
                  >
                    重新启用
                  </el-button>
                  <el-divider direction="vertical"></el-divider> -->
                  <el-button
                    type="text"
                    size="mini"
                    @click="supplierDetailsWay(scope.row)"
                  >
                    详情
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-button
                    v-hasPermi="'supplier/edit'"
                    type="text"
                    size="mini"
                    @click="sendsupplier(scope.row)"
                  >
                    编辑
                  </el-button>
                  <el-divider direction="vertical" />
                  <el-popconfirm
                    title="确定删除当前数据吗"
                    @confirm="delGradeWay(scope.row)"
                  >
                    <el-button
                      slot="reference"
                      v-hasPermi="'supplier/del'"
                      type="text"
                      size="mini"
                    >
                      删除
                    </el-button>
                  </el-popconfirm>
                </template>
              </el-table-column>
            </el-table></el-col>
        </el-row>
        <el-row>
          <el-col style="text-align: right">
            <pagination
              v-show="total > 0"
              :total="total"
              :page.sync="page"
              :limit.sync="limit"
              @pagination="getsupperlist"
            />
          </el-col>
        </el-row>
      </div>
    </div>

    <!-- 详情 -->
    <el-drawer
      title="供应商详情"
      size="800px"
      :visible.sync="drawer"
      :direction="direction"
    >
      <div style="padding: 10px 30px">
        <span class="title" style="font-size: 24px">
          {{ detailrow.supplier_name }}
        </span>
        <span class="sn">ID：{{ detailrow.id }}</span>
        <div class="order_center">
          <el-descriptions
            style="width: 100%; margin-top: 20px"
            direction="vertical"
            :column="5"
          >
            <el-descriptions-item label="等级">{{
              detailrow.SupplierInfo ? detailrow.SupplierInfo.LevelName : "-"
            }}</el-descriptions-item>
            <el-descriptions-item label="商品数量">{{
              detailrow.SupplierInfo ? detailrow.SupplierInfo.goodsCount : "-"
            }}</el-descriptions-item>
            <el-descriptions-item label="销售额">{{
              detailrow.SupplierInfo ? detailrow.SupplierInfo.Saleroom : "-"
            }}</el-descriptions-item>
            <el-descriptions-item label="负责人">
              {{
                detailrow.responsible_person
                  ? detailrow.responsible_person
                  : "-"
              }}
            </el-descriptions-item>
            <el-descriptions-item label="联系方式">{{
              detailrow.supplier_mobile ? detailrow.supplier_mobile : "-"
            }}</el-descriptions-item>
          </el-descriptions>
        </div>
        <el-tabs
          v-model="activeName"
          v-loading="subLoading"
          @tab-click="handleClick"
        >
          <el-tab-pane label="供应商信息" name="供应商信息">
            <el-descriptions title="基本信息" border class="marginTop">
              <el-descriptions-item label="用户ID" label-style="width:100px">{{
                detailrow.id
              }}</el-descriptions-item>
              <el-descriptions-item label="负责人" label-style="width:100px">{{
                detailrow.responsible_person
              }}</el-descriptions-item>
              <el-descriptions-item label="联系方式" label-style="width:100px">{{
                detailrow.supplier_mobile
              }}</el-descriptions-item>
              <el-descriptions-item label="省份" label-style="width:100px">{{
                detailrow.province_name
              }}</el-descriptions-item>
              <el-descriptions-item label="城市" label-style="width:100px">{{
                detailrow.city_name
              }}</el-descriptions-item>
              <el-descriptions-item label="区/县" label-style="width:100px">{{
                detailrow.county_name
              }}</el-descriptions-item>
              <el-descriptions-item label="详细地址" label-style="width:100px">{{
                detailrow.address
              }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="基础概况" border class="marginTop">
              <el-descriptions-item label="管理员" label-style="width:100px">{{
                detailrow.adminName
              }}</el-descriptions-item>
              <el-descriptions-item label="状态" label-style="width:100px">
                <el-tag
                  v-if="detailrow.status == 1"
                  size="mini"
                  type="danger"
                >正常</el-tag>
                <el-tag v-else size="mini" type="danger">已禁用</el-tag>
              </el-descriptions-item>
              <el-descriptions-item label="创建时间" label-style="width:100px">{{
                detailrow.created_at
              }}</el-descriptions-item>
              <el-descriptions-item label="更新时间" label-style="width:100px">{{
                detailrow.updated_at
              }}</el-descriptions-item>
            </el-descriptions>
            <el-descriptions title="备注" border class="marginTop">
              <el-descriptions-item label="备注" label-style="width:100px">{{
                detailrow.remark ? detailrow.remark : "-"
              }}</el-descriptions-item>
            </el-descriptions>
          </el-tab-pane>
          <!-- <el-tab-pane label="订单记录" name="订单记录">
            <el-table
              highlight-current-row
              :data="recordsConsumption"
              :header-cell-style="{
                'background-color': '#f3f8fe',
                color: '#606266',
                height: '50px',
              }"
              style="width: 100%"
            >
              <el-table-column prop="date" label="订单ID"> </el-table-column>
              <el-table-column prop="name" label="收货人"> </el-table-column>
              <el-table-column prop="address" label="商品数量">
              </el-table-column>
              <el-table-column prop="address" label="实付金额">
              </el-table-column>
              <el-table-column prop="address" label="交易完成时间">
              </el-table-column>
            </el-table>
          </el-tab-pane> -->
        </el-tabs>
      </div>
    </el-drawer>
    <!-- 绑定管理员 -->
    <el-dialog
      title="绑定管理员"
      :visible.sync="bindingDialog"
      width="500px"
      :close-on-click-modal="true"
      @close="bindingClose"
    >
      <el-row
        v-loading="bindingLoading"
        :gutter="20"
        style="position: relative"
      >
        <el-form
          ref="bindingForm"
          :rules="bindingRules"
          :model="bindingForm"
          label-width="100px"
        >
          <el-col :span="22">
            <el-form-item label="绑定管理员" prop="adminId">
              <el-select
                v-model="bindingForm.adminId"
                style="width: 100%"
                filterable
                remote
                reserve-keyword
                placeholder="请选择绑定管理员(输入名称可查询)"
                :remote-method="bindingAdminList"
                :loading="loading"
              >
                <el-option
                  v-for="item in adminUserList"
                  :key="item.id"
                  :label="item.nickname + '(' + item.username + ')'"
                  :value="item.id"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button
          :loading="bindingLoading"
          @click="bindingDialog = false"
        >取 消</el-button>
        <el-button
          :loading="bindingLoading"
          type="primary"
          @click="bindingSubmitWay"
        >确 定</el-button>
      </span>
    </el-dialog>

    <detailsView v-if="detailsBool" ref="supplierDetails" />

    <el-drawer
      :modal-append-to-body="false"
      :append-to-body="true"
      title="添加/编辑供应商"
      size="60%"
      :with-header="false"
      :visible.sync="dialogVisibledrawer"
      :show-close="true"
      @close="addressClose"
    >
      <el-scrollbar
        wrap-style="overflow-x:hidden;"
        style="height: calc(100vh - 80px)"
      >
        <el-row v-if="!dialogVisible">
          <div class="drawerTitle">
            <span>供应商-添加/编辑</span>
            <div class="close" @click="addressClose">
              <i class="el-icon-close" style="font-size: 24px;" />
            </div>
          </div>
          <add v-if="dialogVisibledrawer" ref="adddrawer" />
        </el-row>
        <el-row v-else v-loading="subLoading" style="position: relative">
          <el-col :span="24">
            <div class="drawerTitle">
              <span>供应商-添加/编辑</span>
              <div class="close" @click="addressClose">
                <i class="el-icon-close" style="font-size: 24px;" />
              </div>
            </div>
          </el-col>
          <el-form ref="form" :rules="rules" :model="form" label-width="150px">
            <el-col :span="24">
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder" />
                  <div class="text">供应商信息</div>
                </div>
                <div class="right" />
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商等级：" prop="supplier_level_id">
                <el-select
                  v-model="form.supplier_level_id"
                  style="width: calc(100% - 50px)"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商名称：" prop="supplier_name">
                <el-input
                  v-model="form.supplier_name"
                  size="small"
                  maxlength="20"
                  show-word-limit
                  placeholder="请输入供应商名称"
                  style="width: calc(100% - 50px)"
                />
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item label="排序" prop="sort">
                <el-input
                  v-model="form.sort"
                  size="small"
                  maxlength="7"
                  show-word-limit
                  onkeyup="value=value.replace(/\D/g,'')"
                  placeholder="请输入排序"
                  style="width: calc(100% - 50px)"
                />
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="状态是否正常" prop="status">
                <el-radio-group v-model="form.status">
                  <el-radio label="1">正常</el-radio>
                  <el-radio label="2">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input
                  v-model="form.remark"
                  type="textarea"
                  maxlength="200"
                  show-word-limit
                  placeholder="请输入..."
                  style="width: calc(100% - 50px)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <div class="informationTitleView">
                <div class="leftBox">
                  <div class="leftborder" />
                  <div class="text">地址信息</div>
                </div>
                <div class="right" />
              </div>
            </el-col>
            <el-col :span="12">
              <el-form-item label="省市区地址：">
                <el-cascader
                  v-model="value"
                  :placeholder="plasvaukle"
                  :options="citys"
                  :props="{
                    expandTrigger: 'hover',
                    value: 'id',
                    label: 'name',
                  }"
                  style="width: calc(100% - 50px)"
                  @change="handleChange"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="供应商地址：" prop="address">
                <el-input
                  v-model="form.address"
                  size="small"
                  maxlength="50"
                  show-word-limit
                  placeholder="请输入供应商地址"
                  style="width: calc(100% - 50px)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系人姓名：" prop="responsible_person">
                <el-input
                  v-model="form.responsible_person"
                  size="small"
                  maxlength="10"
                  show-word-limit
                  placeholder="请输入联系人姓名"
                  style="width: calc(100% - 50px)"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="联系电话：" prop="supplier_mobile">
                <el-input
                  v-model="form.supplier_mobile"
                  size="small"
                  onkeyup="value=value.replace(/\D/g,'')"
                  placeholder="请输入联系电话"
                  maxlength="11"
                  show-word-limit
                  style="width: calc(100% - 50px)"
                />
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </el-scrollbar>
      <el-row style="margin: 20px 0">
        <el-col
          v-if="!dialogVisible"
          :span="24"
          style="text-align: right; padding-right: 30px"
        >
          <el-button
            type="primary"
            @click="
              () => {
                $refs.adddrawer.submitForm('form');
              }
            "
          >保存</el-button>
        </el-col>
        <el-col
          v-else
          :span="24"
          style="text-align: right; padding-right: 30px"
        >
          <el-button type="primary" @click="submitForm('form')">保存</el-button>
        </el-col>
      </el-row>
    </el-drawer>
  </div>
</template>

<script>
import {
  getsupplierList,
  cityList,
  addSupplier,
  getlevedList,
  exportSupplierList,
  SaveSupplierStatus,
  delSupplier,
  boundAdmin
} from '@/api/supplier/index'
import { list } from '@/api/admin/admin'
import add from './add.vue'
import detailsView from './details'
import { parseTime } from '@/utils/index'
const tableTheadOption = {
  supplier_name: {
    label: '供应商名称',
    field: 'supplier_name'
  },
  responsible_person: {
    label: '负责人',
    field: 'responsible_person'
  },
  supplier_mobile: {
    label: '联系方式',
    field: 'supplier_mobile'
  },
  supplier_memo: {
    label: '备注',
    field: 'supplier_memo'
  },
  status: {
    label: '状态',
    field: 'status'
  },
  province_name: {
    label: '省名称',
    field: 'province_name'
  },
  city_name: {
    label: '市名称',
    field: 'city_name'
  },
  LevelName: {
    label: '等级',
    field: 'LevelName'
  },
  goodsCount: {
    label: '商品总数',
    field: 'goodsCount'
  },
  saleroom: {
    label: '销售额',
    field: 'saleroom'
  },
  adminName: {
    label: '绑定账号',
    field: 'adminName'
  },
  created_at: {
    label: '创建时间',
    field: 'created_at'
  },
  sort: {
    label: '排序',
    field: 'sort'
  },
  address: {
    label: '详细地址',
    field: 'address'
  }
}

const allTableThead = [
  'supplier_name',
  'responsible_person',
  'supplier_mobile',
  'province_name',
  'city_name',
  'address',
  'LevelName',
  'goodsCount',
  'saleroom',
  'adminName',
  'status',
  'sort',
  'supplier_memo',
  'created_at'
]
const defaultTableThead = [
  'supplier_name',
  'LevelName',
  'responsible_person',
  'supplier_mobile',
  'goodsCount',
  'saleroom',
  'adminName',
  'status'
]
export default {
  name: 'Index',
  components: {
    detailsView,
    add
  },
  data() {
    return {
      dialogVisibledrawer: false,
      // 查询条件的时间段
      shijianduan: [],
      admin_id: '',
      quID: [],
      subLoading: false,
      recordsConsumption: [], // 详情tab栏订单数据
      activeName: '供应商信息', // 订单类型
      values: '点击关闭',
      form: {
        id: '', // id
        supplier_level_id: '', // 等级ID
        supplier_name: '', // 供应商名字
        responsible_person: '', // 负责人
        supplier_mobile: '', // 电话
        supplier_memo: '', // 备注
        address: '', // 地址
        sort: '', // 排序
        status: '1', // 状态
        remark: '', // 备注
        province_id: '', // 省
        city_id: '', // 市
        county_id: '' // 区
      },
      citys: [], // 城市列表
      options: [],
      rules: {
        supplier_level_id: [
          { required: true, message: '请选择供应商等级', trigger: 'blur' }
        ],
        supplier_name: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^a-zA-Z\u4e00-\u9fa5·]/g
              if (req.test(value)) {
                return callback(new Error('不能包含特殊字符'))
              } else {
                callback()
              }
            },
            trigger: "change",
          }
        ],
        responsible_person: [
          {
            required: true,
            validator: (rule, value, callback) => {
              const req = /[^a-zA-Z\u4e00-\u9fa5·]/g
              if (req.test(value)) {
                return callback(new Error('不能包含特殊字符'))
              } else {
                callback()
              }
            },
            trigger: 'change'
          }
        ],
        supplier_mobile: [
          {
            required: true,
            validator: (rule, value, callback) => {
              var reg = /^1[3456789]\d{9}$/
              if (!reg.test(value)) {
                return callback(new Error('手机号格式不正确'))
              }
              callback()
            },
            trigger: 'change'
          }
        ]
      }, // 表单验证
      dialogVisible: false,
      loading: true, // 刷新
      input1: '', // 搜索输入值
      optionsore: [
        {
          value: '1',
          label: 'ID'
        },
        {
          value: '2',
          label: '名称'
        },
        {
          value: '3',
          label: '负责人'
        },
        {
          value: '4',
          label: '联系方式'
        }
      ],
      value: '2',
      plasvaukle: '',
      searchDisplay: false,
      drawer: false, // 详情
      direction: 'rtl', // 抽屉的出来形式
      currentPage: 1, // 页码
      page: 1, // 页码
      limit: 20, // 页码
      levelId: '', // 等级iD
      status: '', // 状态
      total: 0, // 总条数
      searchobj: '', // 搜索的数据
      detailrow: '', // 详情
      tableData: [], // 数据
      tableKey: 1, // table key
      tableTheadOptions: tableTheadOption,
      allTableThead: allTableThead,
      tableThead: defaultTableThead, // 默认表头
      checkboxTableThead: defaultTableThead, // 默认表头值
      multipleSelection: [], // 当前选中的列表
      exportLoading: false,
      // 管理员列表
      adminUserList: [],
      bindingForm: {
        SupplierId: '',
        adminId: ''
      },
      bindingRules: {
        adminId: [
          { required: true, message: '请选择管理员账号', trigger: 'change' }
        ]
      },
      bindingDialog: false,
      bindingLoading: false,
      bindingAdminSearch: false,
      detailsBool: false
    }
  },
  watch: {
    checkboxTableThead(valArr) {
      this.tableThead = this.allTableThead.filter(
        (i) => valArr.indexOf(i) >= 0
      )
      this.tableKey = this.tableKey + 1 // 为了保证table 每次都会重渲
      this.$nextTick(() => {
        this.$refs.tablerefs.doLayout()
      })
    }
  },
  mounted() {
    this.loading = true
    const p1 = new Promise((req, rej) => {
      if (localStorage.getItem('region')) {
        this.citys = JSON.parse(localStorage.getItem('region'))
        req()
      } else {
        cityList().then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            rej()
            return this.$messages.error(res.msg)
          }
          this.citys = res.data
          req()
        })
      }
    })
    const p2 = new Promise((req, rej) => {
      getlevedList().then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          rej()
          return this.$messages.error(res.msg)
        }
        this.options = res.data.list
        req()
      })
    })
    Promise.all([p1, p2])
      .then(() => {
        this.getsupperlist() // 供应商列表
      })
      .catch(() => {
        this.loading = false
      })
  },
  methods: {
    addressClose() {
      this.dialogVisibledrawer = false
      if (this.dialogVisible) {
        this.dialogVisible = false
      }
      // this.getsupperlist();
    },
    // 列表选中
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    // 禁用启用
    editStatusWay(row) {
      var obj = {
        id: row.id,
        status: row.status
      }
      this.loading = true
      SaveSupplierStatus(obj)
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            return this.$messages.error(res.msg)
          }
          this.$messages.success('修改成功')
          this.getsupperlist()
        })
        .catch((res) => {
          this.loading = false
        })
    },

    // 导出列表
    exportSupplierListWay() {
      if (this.exportLoading) return
      var ids = ''
      if (this.multipleSelection.length !== 0) {
        var arr = []
        this.multipleSelection.forEach((item) => {
          arr.push(item.id)
        })
        ids = arr.toString()
      }
      this.exportLoading = true
      exportSupplierList({ ids: ids })
        .then((res) => {
          if (res.code !== 200 || res.status !== 1) {
            this.exportLoading = false
            return this.$messages.error(res.msg)
          }
          const tHeader = res.data[0]
          let filterVal = []
          const list = res.data.filter((item, index) => {
            if (index !== 0) return item
          })
          for (var key in list[0]) {
            filterVal.push(key)
          }
          filterVal = filterVal.filter(item => item !== 'city_id' && item !== 'province_id' && item !== 'county_id')
          const data = this.formatJson(filterVal, list)
          setTimeout(() => {
            import('@/vendor/Export2Excel').then((excel) => {
              this.exportLoading = false
              excel.export_json_to_excel({
                header: tHeader, // 表头 必填
                data: data, // 具体数据 必填
                filename: '供应商数据', // 非必填
                autoWidth: true, // 非必填
                bookType: 'xlsx' // 非必填
              })
            })
          }, 300)
        })
        .catch(() => {
          this.exportLoading = false
        })
    },
    // 数据转二维数组
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) =>
        filterVal.map((j) => {
          if (j === 'timestamp') {
            return parseTime(v[j])
          } else {
            return v[j]
          }
        })
      )
    },
    // 选中省市区
    handleChange(value) {
      this.form.province_id = value[0]
      this.form.city_id = value[1]
      this.form.county_id = value[2]
    },
    // 供应商列表
    getsupperlist() {
      this.loading = true
      const obj = {
        page: this.page,
        count: this.limit,
        keyword: this.input1,
        value: this.value,
        start_time: this.shijianduan[0] ? this.shijianduan[0] : '',
        end_time: this.shijianduan[1] ? this.shijianduan[1] : '',
        county_id: this.quID[this.quID.length - 1]
          ? this.quID[this.quID.length - 1]
          : '',
        levelId: this.levelId,
        admin_id: this.admin_id,
        status: this.status
      }
      getsupplierList(obj).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false
          return this.$messages.error(res.msg)
        }
        this.total = res.data.total
        this.tableData = res.data.list
        this.loading = false
      })
    },
    // 删除
    delGradeWay(row) {
      this.loading = true
      delSupplier({ id: row.id }).then((res) => {
        if (res.code !== 200 || res.status !== 1) {
          this.loading = false
          return this.$messages.error(res.msg)
        }
        if (res.code == 200) {
          this.$messages.success('删除成功')
          this.getsupperlist()
        } else {
          this.$messages.error(res.msg)
        }
      })
    },
    // 切换订单类型
    handleClick(tab, event) {
      console.log(tab, event)
    },
    bindingStatusWay(row) {
      this.bindingForm.SupplierId = row.id
      this.bindingDialog = true
      this.bindingLoading = true
      list({ page: 1, limit: 20,type:1 }).then((res) => {
        this.bindingLoading = false
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg)
        }
        this.adminUserList = res.data.data
      })
    },
    bindingClose() {
      this.$refs.bindingForm.resetFields()
      this.bindingForm = {
        SupplierId: '',
        adminId: ''
      }
    },
    bindingAdminList(query) {
      this.bindingAdminSearch = true
      list({ page: 1, limit: 20, name: query,type:1 }).then((res) => {
        this.bindingAdminSearch = false
        if (res.code !== 200 || res.status !== 1) {
          return this.$messages.error(res.msg)
        }
        this.adminUserList = res.data.data
      })
    },
    bindingSubmitWay() {
      this.$refs.bindingForm.validate((valid) => {
        if (valid) {
          this.bindingLoading = true

          boundAdmin(this.bindingForm).then((res) => {
            this.bindingLoading = false
            if (res.code !== 200 || res.status !== 1) {
              return this.$messages.error(res.msg)
            }
            this.$messages.success(res.msg)
            this.bindingDialog = false
            this.getsupperlist()
          })
        } else {
          return false
        }
      })
    },
    // 确认提交表单
    submitForm(formName) {
      if (this.form.province_id == '') {
        this.$messages.info('请选择所在城市')
        return
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.subLoading = true
          addSupplier(this.form).then((res) => {
            this.dialogVisible = false
            if (res.code !== 200 || res.status !== 1) {
              this.addressClose()
              return this.$messages.error(res.msg)

            }
            this.$messages.success('修改成功')

            this.getsupperlist()
          })
          .catch(()=>{

          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    supplierdetail(row) {
      this.detailrow = JSON.parse(JSON.stringify(row))

      this.subLoading = true
      this.drawer = true
      setTimeout(() => {
        this.subLoading = false
      }, 500)
    },
    // 添加供应商
    goodsadd() {
      this.$router.push('/supplier/supplierlist/add/')
    },
    // 编辑
    sendsupplier(row) {
      this.plasvaukle =
        row.province_name + '/' + row.city_name + '/' + row.county_name
      this.form = JSON.parse(JSON.stringify(row))
      this.form.status = String(JSON.parse(JSON.stringify(row)).status)
      this.dialogVisible = true
      this.dialogVisibledrawer = true
    },
    // 页码
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 重置
    resetting() {
      this.searchobj = ''
      this.value = ''
      this.input1 = ''
      this.status = ''
      this.levelId = ''
      this.shijianduan = []
      this.quID = []
      this.admin_id = ''
      this.getsupperlist()
    },
    // 点击搜索
    search() {
      this.getsupperlist()
    },
    // 点击打开抽屉执行
    supplierDetailsWay(item) {
      const _this = this
      this.detailsBool = true
      this.$nextTick(() => {
        _this.$refs.supplierDetails.supplierDetailsWay(item.id)
      })
    }
  }
}
</script>

<style lang="scss">
.title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  font-size: 16px;
  line-height: 16px;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.demo-table-expand {
  display: flex;
  justify-content: start;
  flex-wrap: wrap;
  color: #515a6e;

  div {
    width: 30%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 12px;
  }
}

.marginTop {
  padding: 0 15px !important;
}

.sn {
  color: #606266;
  font-size: 13px;
}

.order_center {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 50px 0 0;
  font-size: 13px;
  color: #666;
}

.input-with-select .el-select .el-input {
  width: 110px !important;
}

.input-with-select .el-input-group__prepend {
  background-color: #fff;
}

#editinput .el-select .el-input {
  width: 440px !important;
}
</style>

<style lang="scss">
.search-form-item {
  padding-bottom: 10px;
  padding-right: 20px;

  .el-form-item__label {
    font-size: 12px;
    font-weight: 500;
    // width:96px;
  }

  .el-input {
    width: 180px;
  }
}
</style>
<style lang="scss" scoped>
.marginBottom-10 {
  margin-bottom: 10px;
}

.marginRight-10 {
  margin-right: 10px;
}

.flex {
  display: flex;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

.flex-end {
  display: flex;
  justify-content: flex-end;
}

.button-box {
  font-size: 14px;
  text-align: right;
  font-size: 12px;

  .inquire-box {
    background: #1890ff;
    color: #ffffff;
  }

  .reset-box {
    background: #eeeeee;
  }
}

.app-container {
  background: #f3f5f7;

  .container-module {
    background: #fff;
    padding: 20px;
    border-radius: 5px;

    .title-module {
      font-size: 18px;
    }

    .search-module {
      padding-top: 20px;
      display: block;
    }

    .table-module {
      .table-top {
        margin-bottom: 20px;
      }

      .table-num {
        margin-left: 5px;
        background: #f0f0f0;
        width: 35px;
        border-radius: 5px;
      }
    }
  }
}
</style>
